<template>
  <div class="content">
    <h1 class="small-title">{{ details.courseName }}</h1>
    <ul class="list">
      <li>课程类型：{{ details.courseTypeName }}</li>
      <li>
        完成状态：{{
          details.learningState == "0" ? "课程未完成" : "课程已达标"
        }}
      </li>
      <li>发布时间：{{ details.updateTime }}</li>
    </ul>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="课程学习" name="first">
        <embed
          :src="pdfUrl"
          type="application/pdf"
          width="100%"
          height="800px"
        />
        <h1 class="news">
          <el-button
              type="primary"
              :disabled="multiple"
              @click="handle"
              v-if="details.learningState=='0'"
              >我已阅读完该课件({{ formattedTime }})</el-button
            >
            <span class="gx" v-if="details.learningState=='1'">恭喜你，该课程已达标!</span>
        </h1>
      </el-tab-pane>
      <el-tab-pane label="课程介绍" name="second">
        <div v-html="richTextContent"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { getCourse,courseHourRecord } from "@/api/whpx/ksUser";
export default {
  data() {
    return {
      details: {},
      // 查询参数
      queryParams: {
        id: null,
        userId: null
      },
      activeName: "first",
      pdfUrl: "",
      richTextContent: "",
      timeLeft: 10,
      timer: null,
      multiple: true,
      Record: {
        courseId: "",
        learningState: 1,
        studentId:''
      }
    };
  },

  computed: {
    formattedTime() {
     // const minutes = Math.floor(this.timeLeft / 60);
      const seconds = this.timeLeft % 60;
      return `${seconds}`;
     // return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  mounted() {
    var ID = this.$route.params.id;
    this.queryParams.id = ID;
    this.queryParams.userId = Cookies.get("id");
    getCourse(this.queryParams).then(response => {
      this.details = response.data;
      this.pdfUrl = response.data.courseWareFile;
      this.richTextContent = response.data.courseDesc;
      this.Record.courseId = response.data.id
    });
    this.timer = setInterval(() => {
      if (this.timeLeft > 0) this.timeLeft--;
      else {
        this.multiple = false
        clearInterval(this.timer)
      };
    }, 1000);
  },
  methods: {
    handle() { 
      this.Record.studentId = Cookies.get("id");
      courseHourRecord(this.Record).then(res => { 
        this.msgSuccess("恭喜你，该课程已达标");
        this.$router.push({ path: "/main" });
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 0.2rem;
  box-sizing: border-box;
  background: #fff;
}
.small-title {
  width: 100%;
  font-size: 0.24rem;
  text-align: center;
}
.list {
  background: rgb(238, 238, 238);
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  display: flex;
  margin: 0.2rem 0;
  li {
    flex: 1;
    text-align: center;
    font-size: 0.14rem;
    color: rgb(102, 102, 102);
  }
}
.news{
  text-align: center;
  line-height: 40px;
  margin-top:30px
}
.gx{
  font-size: 20px;
  color: #0066ff;
}
</style>
